<template>
  <div class="user-dialog bigDialog">
    <el-dialog
        ref="ruleFormRef"
        :model-value="dialogData.props.dialogFormVisible"
        :title="dialogData.props.title"
        :before-close="close"
        :width="dialogData.formLabelWidth"
        :close-on-click-modal="false"
        draggable
    >
      <div>
        <!-- 基础信息 -->
        <div>
          <el-form
            :model="dialogData.formData"
            :inline="true"
            label-width="200px"
            :rules="dialogData.rules"
            ref="addform"
            require-asterisk-position="left"
            size="default"
            scroll-to-error="true"
          >
            <div class="basicstyle">
                <div class="itemStyle ">   
                    <el-form-item  label="单位：" prop="deptId" required>
                        <el-radio-group v-model="dialogData.formData.deptId">
                        <el-radio :label="1">油品</el-radio>
                        <el-radio :label="2">LPG</el-radio>
                        <el-radio :label="3">散杂货</el-radio>
                    </el-radio-group>
                    </el-form-item>
                    <el-form-item  label="年份：" prop="year" required>
                        <el-date-picker
                            v-model="dialogData.formData.year"
                            type="year"
                            placeholder="请选择年份"
                            />
                    </el-form-item>
                    <el-form-item  label="季度：" prop="quarter" required>
                         <el-select class="w-10 m-2 " v-model="dialogData.formData.quarter" clearable  placeholder="请选择季度">
                              <el-option
                              v-for="item in dialogData.dropdown.quarterList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                              />
                        </el-select>    
                    </el-form-item>
                    <el-form-item  label="交接清单数（吨）：" prop="inventoryNum" required>
                        <el-input-number v-model="dialogData.formData.inventoryNum" placeholder="请输入吞吐量" :precision = '3' />
                    </el-form-item>
                    <el-form-item  label="疏港地磅数（吨）：" prop="portNum" required>
                        <el-input-number v-model="dialogData.formData.portNum" placeholder="请输入吞吐量" :precision = '3' />
                    </el-form-item>
                </div>           
            </div>
          </el-form>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            class="btn-mixins-clear-default"
            @click="close"
            >取消</el-button>
          <el-button
            class="btn-mixins dia-suc"
            @click="success(addform)"
            >保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script  setup>
import { defineProps, ref,onBeforeMount } from "vue";
import { reactive, watch, defineEmits } from "vue";
import {getRealName, getymdhms} from '@/utils/auth'
import { ElNotification ,ElMessage, ElMessageBox } from "element-plus";
// import {addMaintenanceRule, updateMaintenanceRule, getDataByParentCode as getDataByParentCode} from '@/api//train.js'
import { inject,getCurrentInstance  } from 'vue'
// import { locationcardmanageList as locationcardmanageList, locationmemberbindingSubmit as locationmemberbindingSubmit } from '@/api/location.js'
import {getDeptTree as getDeptTree, getUserData as getUserData, operateLoss as operateLoss} from "@/api/user";
const instance = getCurrentInstance();
const emits = defineEmits(["update:modelValue"]);
const addform = ref('');
const dialogData = reactive({
    formLabelWidth:instance.proxy.formLabelWidth,
    dropdown:{
        quarterList:[
           {
              label: '一季度',
              value: '一季度'
          },{
              label: '二季度',
              value: '二季度'
          },{
              label: '三季度',
              value: '三季度'
          },{
              label: '四季度',
              value: '四季度'
          }
      ],
    },
    rules:{
      deptId:[{ required: true, message: '请选择单位', trigger: "change"  }],
      year:[{ required: true, message: "请选择年份", trigger: "change" }],
      inventoryNum:[{ required: true,message: "请输入交接清单数（吨）", trigger: "blur" }],
      quarter:[{ required: true, message: "请选择季度", trigger: "change" }],
      portNum:[{ required: true,message: "请输入疏港地磅数（吨）", trigger: "blur" }],
    },
    props:{
        title:'',
        dialogFormVisible:'',
    },
    formData:{
    },
  showInput1 : false,
  showInput2 : false
})
let props = defineProps({
  dialogFormVisible: {
    type: Boolean,
  },
  dialogTitle: {
    type: String,
  },
  dialogTableValue: {
    type: Object,
    default: () => {},
  },

});

onBeforeMount(() => {
//   getDeptTreeFun()
//   locationcardmanageListFun()
})
watch(
  () => props,
  () => {
    dialogData.props.title = props.dialogTitle;
    dialogData.props.dialogFormVisible = props.dialogFormVisible;
    if (dialogData.props.title === "编辑" ){
        dialogData.formData = props.dialogTableValue;
    }else {
        dialogData.formData= {}
        // dialogData.formData.mustNumber = 0
    }
    
  },
  { deep: true, immediate: true }
);


const close = () => {
  addform.value.resetFields();
  emits("update:modelValue", false);
};

const success = (addform) => {
  if (!addform) return;
  addform.validate(async (valid) => {
    if (valid) {
    //   if (dialogData.props.title === "编辑") {
        let obj = JSON.parse(JSON.stringify(dialogData.formData));
        obj.year = new Date(obj.year).getFullYear();
        let user = JSON.parse(localStorage.getItem('userData'))
         obj.createUser = user.realName;
        operateLoss(obj).then((res)=>{
          if(res.code ===200){
            close()
          }else{
            ElNotification({
              title: '警告',
              message: res.message?res.message:'服务器异常',
              type: 'warning',
            })
            if(res.message.indexOf('token已过期')>-1  ){
              store.dispatch('app/logout')
            }
          }
        })
    } else {
      return false;
    }
  });
};

</script>



<style lang = 'less' scoped>
.user-dialog {

  .basictitle {
    font-size: 18px;
    margin: 16px 0 24px;
    color: #333333;
  }
}
:deep(.el-form-item__label ){
  font-size: 14px;
}

.itemStyle{
    .titleName{
        color: #4B515B;
        font-size: 14px;
        padding-left: 8px;
        margin-left: 8px;
        border-left: 5px solid #2E83FC;
        margin-bottom: 16px;
        
    }
}
.bigDialog{
    :deep(.el-input){
      width: 100%;
    }
    :deep(.el-select){
      width:100%;
    }
    :deep(.el-form-item__content) {
    width: 100%;
  }
    :deep(.el-dialog__footer) {
      padding-top: 16px;
      background-color: #ffffff;
    }
    :deep(.el-dialog__body) {
      padding: 0;
      max-height: 550px;
      overflow-y: auto;
      overflow-x: hidden;
      background-color: #ffffff;
      padding: 32px 88px 16px 32px;
    }
    :deep(.el-dialog__header) {
      border-bottom: 1px solid #cccccc;
      padding: 16px;
      margin-right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    :deep(.el-dialog__title) {
      color: #1C222C;
      font-size: 20px;
      width: 100px;
    }
    :deep(.el-dialog__headerbtn ){
      position: static;
      top: 0px;
      right: 0;
      padding: 0;
      width: auto;
      height: auto;
    }
  
  :deep(.el-form-item__label ){
    font-size: 14px;
  }
  :deep(.el-form) {
    position: relative;
  }
  
  :deep(.el-form-item__content) {
    width: 100%;
  }
  :deep(.el-form--inline .el-form-item){
      width:100%
  }
  :deep(.el-input-number){
      width: 100%;
  }
  :deep(.el-input-number .el-input__inner){
    text-align: left;
}
  }
</style>
